<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue实例_生命周期</title>
</head>

<body>
  <!--
        1. vue实例的生命周期主要分为三个阶段
            1). 初始化显示
              * beforeCreate()
              * created()
              * beforeMount()
              * mounted()
                  挂载之前，先在内存中对el.outerHTML进行编译，然后再一次性渲染页面（挂载）

            2). 更新状态
              * beforeUpdate()
              * updated()
            3). 销毁vue实例: vm.$destory()
              * beforeDestory()
              * destoryed()

        2. 常用的生命周期方法
            created()/mounted(): 发送ajax请求, 启动定时器等异步任务
                * created在模板渲染成html前调用，即通常初始化某些属性，然后再渲染成试图
                * mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的DOM节点进行一些需要的操作
            beforeDestory(): vue实例销毁之前调用，可以用来做一些收尾工作， 如: 清除定时器


        3. 注意箭头函数没有this，所以会往上级找，直到顶部



-->

  <div id="app">
    <button @click="destroyVue">destory vue</button>
    <p v-if="isShow">新年快乐</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        isShow: true
      },

      // 生命周期函数，页面初始化显示后执行
      mounted() {
        // 执行异步任务
        this.intervalId = setInterval(() => {
          // 注意，箭头函数没有this，所以会往上级查找，直到顶部
          console.log('定时器执行')
          this.isShow = !this.isShow
        }, 1000)
      },
      // 生命周期函数
      beforeDestroy() {
        console.log('beforeDestroy()')
        // 执行收尾的工作，关闭定时器
        clearInterval(this.intervalId)
      },

      methods: {
        destroyVue() {
          this.$destroy()
        }
      }
    })


  </script>
</body>

</html>
